<template>
    <div class="flex-col">
        <div class="flex1 flex-col">
            <div class="panel _body flex1 flex-col">
                <div class="panel-head">
                    <div class="panel-head-l"><span class="panel-icon _default"></span>固体废物信息</div>
                </div>
                <div style="height:30px"></div>
                <div class="flex1">
                    <!-- 表格 -->
                    <el-table :data="tableData"
                              :span-method="objectSpanMethod"
                              show-summary
                              :summary-method="getSummaries"
                              border
                              style="width: 100%">
                        <el-table-column label="序号"
                                         type="index"
                                         :index="nStartno"
                                         align="center"
                                         width="80"></el-table-column>
                        <el-table-column prop="yqmc"
                                         label="所属园区"></el-table-column>
                        <el-table-column prop="pqmc"
                                         label="所属片区"></el-table-column>
                        <el-table-column prop="enterprisename"
                                         label="企业名称"></el-table-column>
                        <el-table-column prop="years"
                                         label="年度"></el-table-column>
                        <el-table-column prop="season"
                                         label="季度"></el-table-column>
                        <el-table-column prop="resourceusename"
                                         label="综合利用资源名称"></el-table-column>
                        <el-table-column prop="seasoncsl"
                                         label="产生量"></el-table-column>
                        <el-table-column prop="storagecapacity"
                                         label="贮存量"></el-table-column>
                        <el-table-column label="自行处置">
                            <el-table-column prop="processmode"
                                             label="处置方式">
                            </el-table-column>
                            <el-table-column prop="seasoncll"
                                             label="处理量">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="自行利用">
                            <el-table-column prop="usepattern"
                                             label="利用方式">
                            </el-table-column>
                            <el-table-column prop="usevalue"
                                             label="利用量">
                            </el-table-column>
                            <el-table-column prop="useunit"
                                             label="利用单位名称">
                            </el-table-column>
                            <el-table-column prop="cpcl"
                                             label="产品产量">
                            </el-table-column>
                            <el-table-column prop="mixproportion"
                                             label="掺入比例">
                            </el-table-column>
                        </el-table-column>
                    </el-table>


                </div>
                <!-- 分页条 -->
                <wiv-pagebar ref="pagebar"
                             @after-flip="fAfterFlip"></wiv-pagebar>
            </div>
        </div>

        <!--子页-->
        <sub-detail class="page _sub"
                    v-if="bShowDetail"
                    :visible.sync="bShowDetail"
                    :detail="oCurRow"
                    :is-view="bIsView"
                    @data-change="fDetailDataChange" />
    </div>
</template>

<script>
    import { URLS_HBDA } from '@/urls.js';
    // import SubDetail from './list/detail.vue';//详情子页

    export default {
        components: {
            // SubDetail
        },
        data() {
            return {
                //-- 表格 -- 
                nStartno: 0, //当前页数据的开始序号（从1开始） 
                oCurRow: null, //表格选中行 
                bShowDetail: false, //子页是否显示
                bIsView: false, //详情是否为查看状态，查看时，表单内容不可编辑   
                tableData: [],//表格数据
                mergeObj: {},
                mergeArr: ['id', 'yqmc', 'pqmc', 'enterprisename', 'years'],
            };
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            this.fResetTable();
            //this.fResetSelect();


        },
        beforeDestroy() {
        },
        //**** methods
        methods: {

            //按钮事件
            fDialogBtnClick(sType) {//弹框按钮点击事件
                switch (sType) {
                    case 'search'://搜索 
                        console.log('点击了搜索事件')
                        break;
                    case 'reset'://重置 
                        this.oFilterForm = {}
                        break;
                    case 'test'://其他按钮
                        //...
                        break;
                }
            },
            fDetailDataChange() {//弹框中数据发生变化，如：新增、修改的保存操作
                //this.fResetList();
            },
            fAfterFlip(aData, oPageApi) {
                this.getSpanArr(aData);
                this.tableData = aData;
                this.nStartno = oPageApi.startno;
            },
            //*** 其他
            //请求表格数据
            fResetTable() {
                this.$refs.pagebar.fReset({
                    url: URLS_HBDA.d_getQyhbdagfList
                });
            },

            getSummaries(param, row, column, rowIndex, columnIndex) {

                const { columns, data } = param;
                return 1
            },
            getSpanArr(data) {
                this.mergeArr.forEach((key, index1) => {
                    let count = 0; // 用来记录需要合并行的起始位置
                    this.mergeObj[key] = []; // 记录每一列的合并信息
                    data.forEach((item, index) => {
                        // index == 0表示数据为第一行，直接 push 一个 1
                        if (index === 0) {
                            this.mergeObj[key].push(1);
                        } else {
                            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
                            if (item[key] === data[index - 1][key]) {
                                this.mergeObj[key][count] += 1;
                                this.mergeObj[key].push(0);
                            } else {
                                // 如果当前行和上一行其值不相等 
                                count = index; // 记录当前位置 
                                this.mergeObj[key].push(1); // 重新push 一个 1
                            }
                        }
                    })
                })
            },
            // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                // 判断列的属性
                if (this.mergeArr.indexOf(column.property) !== -1) {
                    if (this.mergeObj[column.property][rowIndex]) {
                        return [this.mergeObj[column.property][rowIndex], 1]
                    } else {
                        return [0, 0];
                    }
                }
            }
        }
        //**** template, render
    };
</script>
<style lang="less" rel="stylesheet" scoped>
</style>
